<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a  th:href="@{/index}">主页</a></li>
    <li class="breadcrumb-item active">个人信息</li>
</ol>
<div class="container" align="center">
        <h2>个人信息</h2>

        <div class="card" style="width:400px">
            <div align="center">
             <img  class="card-img-top" th:src="${session?.data?.userHeadphoto}" style="width:100px;height: 100px;border-radius: 100%">
           </div>
            <div class="card-body" align="left">
                <h4 class="card-title" th:text="${session?.data?.userName}"></h4>
                <p  class="card-text">昵称：<span th:text="${session?.data?.userNickname}"></span></p>
                <p  class="card-text">性别：<span th:text="${session?.data?.userGender}"></span></p>
                <p  class="card-text"> 邮件：<span th:text="${session?.data?.userEmail}"></span></p>
                <p  class="card-text"> 电话：<span th:text="${session?.data?.userPhone}"></span></p>
                <p  class="card-text">生日：<span th:text="${session?.data?.userBirthday}"></span></span></p>
                <a th:href="@{/user/toUpdatePwd}" class="btn btn-primary">修改密码</a>
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                修改个人信息
            </button>
            </div>
        </div>
        <br>
    </div>

      <!-- 按钮：用于打开模态框 -->


      <!-- 模态框 -->
      <div class="modal fade" id="myModal">
          <div class="modal-dialog">
              <div class="modal-content">

                  <!-- 模态框头部 -->
                  <div class="modal-header">
                      <h4 class="modal-title">用户修改</h4>
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                  </div>

                  <!-- 模态框主体 -->
                  <div class="modal-body">
                      <span>[[${msg}]]</span>
                      <form th:action="@{/user/updateInfo}" method="post" id="myform">
                          <input type="hidden" name="userId" th:value="${session?.data?.userId}"><br>
                           <label for="upload">
                               <img id = "img" class="card-img-top" th:src="${session?.data?.userHeadphoto}" style="width:100px;height: 100px;border-radius: 100%">
                           </label><br>
                          <input name="userHeadphoto" id="head" hidden>
                         头像：<input type="file" id = "upload"><br>

                          姓名：<input type="text" name="userName" placeholder="请输入密码"          th:value="${session?.data?.userName}"><br>
                          昵称：<input type="text" name = "userNickname" placeholder="昵称"         th:value="${session?.data?.userNickname}"><br>
                          性别：<input type="text" name = "userGender" placeholder="亲输入新密码"     th:value="${session?.data?.userGender}"><br>
                          邮件：<input type="text" name = "userEmail" placeholder="亲输入新密码"      th:value="${session?.data?.userEmail}"><br>
                          电话：<input type="text" name = "userPhone" placeholder="亲输入新密码"      th:value="${session?.data?.userPhone}"><br>
                          生日：<input type="text" name = "userBirthday" placeholder="亲输入新密码"    th:value="${session?.data?.userBirthday}"><br>

                      </form>
                  </div>

                  <!-- 模态框底部 -->
                  <div class="modal-footer">
                      <button type="submit" class="btn btn-success" form="myform">提交</button>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                  </div>
              </div>
          </div>
      </div>
</body>

<script>
    $(function () {
        $("#upload").change(function () {
            let form = new FormData();
            form.append("file", $("#upload").prop("files")[0]);
            $.ajax({
                url: "/image/upload",    //后台url
                data: form,
                cache: false,
                async: false,
                type: "POST",          //类型，POST或者GET
                dataType: 'json',       //数据返回类型，可以是xml、json等
                processData: false,
                contentType: false,
                success: function (data) {//成功，回调函数
                    if (data.success) {
                        let url = data.url;
                        $("#img").attr("src", url);
                        $("#head").attr("value",url);
                    } else {
                        alert(data.message);
                    }
                },
                error: function (er) {//失败，回调函数
                    console.log(er)
                    alert(JSON.stringify(data));
                }
            });
        });
    });
</script>
</html>